<template>
    <el-menu :default-active="defaultActive"
             background-color="#2A3FCF"
             text-color="#ffffff"
             class="global-menu-vertical"
             @select="handleselect"
             :collapse="false">
        <template v-for="item in menus">
            <el-submenu v-if="item.children" :key="item.id" :index="item.id">
                <template slot="title">
                    <div style="min-width: 160px">
                        <i class="menu-icon" :class="item.icon"></i>
                        <span class="menu-name">{{item.name}}</span>
                    </div>
                </template>
                <template v-if="item.children">
                    <el-menu-item v-for="child in item.children" :key="child.id" :index="child.id">
                        <i class="menu-icon" :class="child.icon"></i>
                        <span class="menu-name">{{child.name}}</span>
                    </el-menu-item>
                </template>
            </el-submenu>
            <el-menu-item v-else :key="item.id" :index="item.id">
                <i class="menu-icon" :class="item.icon"></i>
                <span class="menu-name">{{item.name}}</span>
            </el-menu-item>
        </template>
    </el-menu>
</template>

<script>
import routes from '@/router/routes'
import { mapState } from 'vuex'

export default {
  name: 'sidemenu',
  data() {
    return {
      menus: [],
      defaultActive: 'home'
    }
  },
  mounted() {
    this.$bus.$on('updateMenu', this.updateMenu)
    this.updateMenu()
  },
  methods: {
    updateMenu() {
      this.menus = this.getMenus()
    },
    getMenus() {
      const list = this.$route.path.split('/')
      list.shift()
      this.defaultActive = list.join('_')
      const getMap = (list, parent) => {
        const path = parent.path
        return list.filter(item => !item.notMenu && this.baseInfo.menuCodeList.includes(item.name)).map(item => {
          return {
            id: item.name,
            name: item.title,
            icon: item.icon,
            path: path ? [path, item.path].join('/') : item.path,
            children: item.children ? getMap(item.children, item) : null
          }
        })
      }
      return getMap(routes, {path: ''})
    },
    handleselect(index) {
      const findPath = (list, id) => {
        for (const item of list) {
          if (item.id === id) {
            return item.path
          }
          if (item.children) {
            const path = findPath(item.children, id)
            if (path) {
              return path
            }
          }
        }
      }
      const path = findPath(this.menus, index)
      if (path) {
        this.$router.push({
          path
        })
      }
    }
  },
  computed: {
    ...mapState('userInfo', ['baseInfo']),
  }
}
</script>

<style lang="scss" scoped>

    .el-menu {
        border-right: none !important;
    }

    .global-menu-vertical {
        overflow-x: hidden;
        overflow-y: auto;
        min-width: 150px;
        .menu-icon {
            margin-right: 5px;
            color: #ffffff;
        }
    }

    @media print {
        .global-menu-vertical {
            display: none;
        }
    }
</style>